<template>
	<view class="warp">
		<view class="title" style="margin-top:15rpx">档次</view>
		<u-row gutter="16">
			<u-col span="3" v-for="(item, index) in HOTEL_TYPE" :key="index">
				<view :class="['item',item.active? 'active' : '']" @click="filterChange(item)">{{item.label}}</view>
			</u-col>
		</u-row>
		<view class="title">价格（元）</view>
		<u-row gutter="16">
			<u-col span="3" v-for="(item, index) in HOTEL_PRICE" :key="index">
				<view :class="['item',curPriceIndex == index? 'active' : '']" @click="filterPrice(item, index)">{{item.label}}</view>
			</u-col>
		</u-row>
		<u-button style="margin-top:30rpx" type="warning" shape="circle" @click="submitFilter">确定</u-button>
	</view>
</template>

<script>
	import dateJs from './constant.js'
	export default {
		props: {
			minPrice: {
				default: '',
				type: String
			},
			hotelStars: {
				default: '',
				type: String
			}
		},
		data() {
			return {
				HOTEL_TYPE: dateJs.hotelType,
				HOTEL_PRICE: dateJs.hotelPrice,
				hotelStarsArr: {val:[], arr:[]},
				curPriceIndex: 0
			}
		},
		watch: {
			hotelStars: {
				handler(newVal) {
				  this.HOTEL_TYPE.map(item => {
					  if (newVal.indexOf(item.val) > -1) {
						  item.active = true;
					  } else {
						  item.active = false;
					  }
					  return item
				  })
				},
				immediate: true,
			},
			minPrice: {
				handler(newVal) {
				 this.curPriceIndex = this.HOTEL_PRICE.findIndex(item => { return item.min == newVal })
				},
				immediate: true,
			},
		},
		methods: {
			filterChange(item) {
				item.active = !item.active;
				this.hotelStarsArr = this.HOTEL_TYPE.reduce((acc, cur) => {
					if (cur.active) {
						acc.val.push(cur.val)
						acc.arr.push(cur.label)
					}
					return acc
				}, {val:[], arr:[]})
			},
			filterPrice(item, index) {
				this.curPriceIndex = index;
			},
			submitFilter() {
				this.$emit('filterSuccess', {
					price: this.HOTEL_PRICE[this.curPriceIndex],
					stars: this.hotelStarsArr,
					curPriceIndex: this.curPriceIndex,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		background-color: #FFFFFF;
		padding: 20rpx;
		.title {
			margin-top: 30rpx;
			font-size: 30rpx;
		}
		.item {
			border: 1rpx solid #969696;
			border-radius: 6rpx;
			text-align: center;
			line-height: 60rpx;
			margin-top: 20rpx;
		}
		.active {
			border: 1rpx solid $u-type-warning;
			color: $u-type-warning;
		}
	}
</style>
